<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    ></r-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        // userName: '',
        oprType: "",
        phone: "",
        orderNo: "",
        returnBatteryNo: "",
        batteryNo: "",
        userType: null,
        ctime: "",
        ftime: ""
      },
      searchForm: [
        {
          type: "select",
          prop: "userType",
          placeholder: " User Type",
          width: 220,
          options: [
            { label: "WeChat User", value: 1 },
            { label: "Alipay User", value: 2 },
            { label: "Maintenance Personnel", value: 3 }
          ]
        },
        {
          type: "input",
          prop: "phone",
          placeholder: "Phone",
          width: 180
        },
        {
          type: "input",
          prop: "orderNo",
          placeholder: "Order Nnumber",
          width: 250
        },
        {
          type: "input",
          prop: "returnBatteryNo",
          placeholder: "Old Battery Number",
          width: 280
        },
        {
          type: "input",
          prop: "batteryNo",
          placeholder: "New Battery Number",
          width: 280
        },
        {
          type: "select",
          prop: "oprType",
          placeholder: "Business Type",
          width: 230,
          options: [
            { label: "Equipment Door Opening", value: "-1" },
            { label: "The Keeper Opens The Door", value: "0" },
            { label: "Rent Battery", value: "1" },
            { label: "Battery Swap", value: "2" },
            { label: "Check Battery", value: "3" },
            { label: "Deposit Return Battery", value: "4" }
          ]
        },
        {
          type: "date",
          placeholder: "Start Time",
          prop: "ctime",
          width: 220,
          change: val => {
            this.searchData.ctime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Time",
          prop: "ftime",
          width: 220,
          change: val => {
            this.searchData.ftime = val;
            if (this.searchData.ftime) {
              this.searchData.ftime = this.searchData.ftime + " 23:59:59";
            }
          }
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => {
            this.zeroFn();
            this.init();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              oprType: "",
              phone: "",
              orderNo: "",
              returnBatteryNo: "",
              batteryNo: "",
              userType: null,
              ctime: "",
              ftime: ""
            };
            this.zeroFn();
            this.init();
          }
        }
      ],

      tableHandles: [
        {
          label: "Export Battery Swap Records",
          type: "primary",
          icon: "el-icon-download",
          titles:
            "可以根据User Type、Phone、Order Nnumber、Battery Number、Business Type、时间筛选出订单再Export，也可以不选，直接ExportWhole订单",
          plain: true,
          loading: false,
          handle: async e => {
            const res = await this.apis.deviceLogExports(this.searchData);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.code == 200 ? "success" : "error"
            });
            location.href = process.env.VUE_APP_URL + res.msg;
          }
        }
      ],
      tableData: [],
      tableCols: [
        { label: "Username", prop: "userName", width: 100 },
        {
          label: " User Type",
          prop: "userType",
          width: 100,
          formatter: e =>
            e.userType == 1
              ? "WeChat用户"
              : e.userType == 2
              ? "Alipay用户"
              : e.userType == 3
              ? "Maintenance"
              : "--"
        },
        { label: "Phone", prop: "phone" },
        { label: "Order Number", prop: "orderNo" },
        {
          label: "Business Type",
          prop: "oprType",
          formatter: e =>
            e.oprType == -1
              ? "设备开门"
              : e.oprType == 0
              ? "管理员开门"
              : e.oprType == 1
              ? "租Battery"
              : e.oprType == 2
              ? "Battery Swap"
              : e.oprType == 3
              ? "寄存Battery"
              : e.oprType == 4
              ? "Deposit退电"
              : "--"
        },
        {
          label: "Old Battery Number",
          prop: "returnBatteryNo",
          formatter: e =>
            e.returnBatteryNo && e.returnElectric
              ? e.returnBatteryNo + "，SOC" + e.returnElectric + "%"
              : e.returnBatteryNo
              ? e.returnBatteryNo
              : "-"
        },
        {
          label: "New Battery Number",
          prop: "batteryNo",
          formatter: e =>
            e.batteryNo && e.electric
              ? e.batteryNo + "，SOC" + e.electric + "%"
              : e.batteryNo
              ? e.batteryNo
              : "-"
        },
        {
          label: "Status",
          prop: "statusStr",
          itemClass: e =>
            e.statusStr == "Success" ||
            (!e.statusStr && e.returnStatusStr == "Success")
              ? "success"
              : e.statusStr == "仓门打开Failure" ||
                e.returnStatusStr == "仓门打开Failure" ||
                e.statusStr == "未领取Battery" ||
                e.returnStatusStr == "Not ReturnedBattery" ||
                e.returnStatusStr == "Battery不匹配"
              ? "danger"
              : "",
          formatter: e =>
            e.statusStr
              ? e.statusStr
              : e.returnStatusStr
              ? e.returnStatusStr
              : "--"
        },
        { label: "Swap Cabinet Number", prop: "deviceNo" },
        { label: "Operation Time", prop: "ctime" }
        // { label: "Completion Time", prop: "ftime" }
      ],
      tablePage: { limit: 10, page: 1, total: 0 }
    };
  },
  components: {},
  computed: {},
  mounted() {
    if (this.$route.query.sn) {
      this.searchData.sn = this.$route.query.sn;
    }
    if (this.$route.params.phone) {
      console.log("这是别的页面跳转过来的参数", this.$route.params.phone);
      this.searchData.phone = this.$route.params.phone;
    }

    this.init();
  },
  methods: {
    zeroFn() {
      this.tablePage.limit = 10;
      this.tablePage.page = 1;
      this.tablePage.total = 0;
    },
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.deviceLog_list(parm);
      if (res) {
        this.tableData = res.rows;
        this.tablePage.total = res.total;
      }
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}

.Tip {
  margin-left: 20px;
}
</style>
